<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.绘制矩形</title>
    <style>
        body>* {
            margin-left: 40px;
        }li{
             margin-bottom:  0.5em;
         }
        canvas{
            display: block;
        }
    </style>
</head>
<body>
<h4><a href="http://caibaojian.com/canvas/2.html">绘制矩形</a></h4>
<canvas id="canvas">你的浏览器居然不支持Canvas？！赶快换一个吧！！</canvas>
<ol>
    <li>绘制线条、闭合 （不闭合也可填充）
        <br>
        设置填充样式：颜色 fillStyle、开始填充 fill()    <br/> &nbsp;</li>
    <li>
        快速绘制，用rect() 绘制矩形路径
        <br>
        设置填充样式：颜色 fillStyle、开始填充 fill()
    </li>
</ol>
<script>
    var cans= document.getElementById('canvas');
    cans.width=400;
    cans.height=400;
    cans.style.background='#eee';

    var context= cans.getContext('2d');


    //**开始新路径 / 路径设置
    context.beginPath();
    context.moveTo(120,120);          //路径--起点
    context.lineTo(360,120);         //路径--下一个点
    context.lineTo(360,240);
    context.lineTo(120,240);
    //闭合路径--最后一笔可以不画
    // context.lineTo(20,20);
    context.closePath();

    //绘制设置
    context.fillStyle='orange';     //颜色，fill填充
    context.lineWidth=1;            //宽度-px
    context.strokeStyle='red';   //颜色，stroke描边

    //**确认绘制：填充、描边
    context.fill();
    context.stroke();

    //------------------------------------------------------------------

    //** 使用 rect绘制矩形路径
    context.beginPath();
    context.rect(20, 20, 50, 80 );
    context.lineWidth=2;
    context.fillStyle='blue';
    context.strokeStyle='red';
    context.fill();
    context.stroke();
</script>


<h5>实例1：</h5>
<canvas id="canimg"></canvas>

<script>
    //**实例
    var canimg= document.getElementById('canimg');
    canimg.width= 400;
    canimg.height= 400;
    canimg.style.background='#eee';
    var conImg= canimg.getContext('2d');

    for(var i=1; i<10; i++){
        drawRect(conImg, i*20-5, i*20-5, 400-i*40+10, 400-i*40+10, 'white', 10, 'black' );
        // drawRect(conImg, i*10+10, i*10+10, 400-i*20-20, 400-i*20-20, 'white', 10, 'white' );
    }
    drawRect(conImg, 195, 195, 10, 10, 'black', 10, 'black' );
    function drawRect(cxt, x, y, w, h, color, lw, lcolor) {
        cxt.beginPath();
        cxt.rect(x,y,w,h);
        cxt.lineWidth=lw;
        cxt.strokeStyle=lcolor;
        cxt.fillStyle=color;
        cxt.fill();
        cxt.stroke();
    }
</script>
<br>
<h5>实例2：</h5>
<canvas id="can_star"></canvas>
<script>
    //**实例
    var canstar= document.getElementById('can_star');
    canstar.width= 400;
    canstar.height= 400;
    canstar.style.background='#eee';
    var constar= canstar.getContext('2d');
    constar.beginPath();
    constar.moveTo(0, 100);
    constar.lineTo(100, 100);
    constar.lineTo(150, 14);
    constar.lineTo(200, 100);
    constar.lineTo(300, 100);
    constar.lineTo(300, 100);
    constar.lineTo(250, 186);
    constar.lineTo(300, 272);
    constar.lineTo(200, 272);
    constar.lineTo(150, 358);
    constar.lineTo(100, 272);
    constar.lineTo(0, 272);
    constar.lineTo(50, 186);
    constar.closePath();
    constar.strokeStyle='red';
    constar.lineWidth=2;
    constar.stroke();
    constar.fillStyle='green';
    constar.fill();
</script>
</body>
</html>